<template>
  <button @click="isShow = true">点击显示盒子</button>
  <button @click="isShow = false">点击隐藏盒子</button>
  <!-- 🔔Transition 动画标签注意点：只能放一个子元素或组件 -->
  <Transition name="v">
    <div v-if="isShow" class="box"></div>
  </Transition>
</template>

<script>
/*
  学习目标：Vue 动画
*/
import { ref } from 'vue'
export default {
  setup () {
    const isShow = ref(false)
    return { isShow }
  }
}
</script>

<style lang="less" scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: palegreen;
}
// Vue 动画类 - enter - 元素显示的时候添加
.v-enter-from {
  opacity: 0;
}
.v-enter-active {
  transition: all 5s;
}
.v-enter-to {
  opacity: 1;
}
// Vue 动画类 - leave - 元素显示的时候添加
.v-leave-from {
  opacity: 1;
}
.v-leave-active {
  transition: all 5s;
}
.v-leave-to {
  opacity: 0;
}
</style>
